@extends('layout')
@section('content')
    <link rel="stylesheet" href="{{asset('css/home.css')}}">

    <div class="carousel-container">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">

                @foreach($images as $i => $item)
                    <div class="carousel-item {{$i === 0 ? 'active' : ''}}">
                        <a class="d-block w-100"
                           style="background-image: url('{{$item->url}}')"
                           alt="First slide">
                        </a>
                    </div>
                @endforeach

                {{--<div class="carousel-item">--}}
                    {{--<a class="d-block w-100"--}}
                       {{--style="background-image: url('http://www.bbg-psa.com/img/qh2.jpg')"--}}
                       {{--alt="First slide">--}}
                    {{--</a>--}}
                {{--</div>--}}
                {{--<div class="carousel-item">--}}
                    {{--<a class="d-block w-100"--}}
                       {{--style="background-image: url('http://www.bbg-psa.com/img/qh3.jpg')"--}}
                       {{--alt="First slide">--}}
                    {{--</a>--}}
                {{--</div>--}}
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="login-box">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">会员登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">会员注册</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="form-group row">
                    <label for="formGroupExampleInput " class="col-sm-3 col-form-label">邮箱</label>
                    <input type="email" class="form-control col-sm-8" id="input-email" placeholder="用户名">
                    </div>
                    <div class="form-group row">
                    <label for="formGroupExampleInput2" class="col-sm-3 col-form-label">密码</label>
                    <input type="password" class="form-control  col-sm-8" id="input-password" placeholder="密码">
                    </div>

                    <button type="button" id="loginbtn" class="btn btn-primary btn-lg btn-block login-box-login">登录</button>

                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="form-group row">
                            <label for="email" class="col-sm-3 col-form-label">邮箱</label>
                            <input type="email" class="form-control  col-sm-8" id="register-email" placeholder="邮箱">
                        </div>
                        {{--<div class="form-group row">--}}
                        {{--<label for="acount " class="col-sm-4 col-form-label">账号</label>--}}
                        {{--<input type="text" class="form-control col-sm-8" id="acount" placeholder="用户名">--}}
                        {{--</div>--}}
                        <div class="form-group row">
                            <label for="pwd" class="col-sm-3 col-form-label">密码</label>
                            <input type="password" class="form-control  col-sm-8" id="register-pwd" placeholder="密码">
                        </div>


                        <div class="form-group row">
                            <label for="code" class="col-sm-3 col-form-label">验证码</label>
                            <div class="input-group col-sm-8 register-code">
                                <input id="register-code" type="text" class="form-control" placeholder="验证码" aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button id="sendMail" class="btn btn-outline-secondary" type="button">发送</button>
                                </div>
                            </div>
                        </div>
                        <button  id="signIn" type="button" class="btn btn-primary btn-lg btn-block login-box-login">注册</button>
            </div>
            {{--<div class="login-box-title">会员登录</div>--}}

        </div>
    </div>
    <div class="container about ">
        <div class="bbw-table">
            <div class="table-title">
                公司新闻 <a href="/news" style="float: right;color: #ffffff">更多>></a>
            </div>
            <ul class="table-content">

                @foreach($new[0] as $item)
                <li>
                    <a href="/news/{{$item -> id}}" class="table-item ">
                        <div>
                            <i class="fa fa-caret-right"></i>
                            <p>{{$item -> title}}</p>
                        </div>
                        <p class="item-date">{{$item -> creat_at}}</p>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
        <div class="bbw-table bbw-sw-table">
            <div class="sw-table-title">
                <ul class="nav" role="tablist" >
                    <li >
                        <a class="active" id="tab1" href="#pane1" data-toggle="pill" role="tab" aria-controls="pane1" aria-selected="true">最新公告</a></li>
                    <li><a id="tab2" href="#pane2" data-toggle="pill" role="tab" aria-controls="pane2" aria-selected="false">口岸动态</a></li>
                    <li><a id="tab3" href="#pane3" data-toggle="pill" role="tab" aria-controls="pane3" aria-selected="false">行业动态</a></li>
                </ul>

            </div>
            <div class="tab-content">
                <ul id="pane1" class="tab-pane table-content  fade show active" role="tabpanel" aria-labelledby="tab1">
                    {{--{{dd($gonggao)}}--}}
                    @foreach($gonggao as $item)
                        <li>
                            <a href="/news/{{$item -> id}}" class="table-item ">
                                <div>
                                    <i class="fa fa-caret-right"></i>
                                    <p>{{$item -> title}}</p>
                                </div>
                                <p class="item-date">{{$item -> creat_at}}</p>
                            </a>
                        </li>
                    @endforeach
                </ul>
                <ul id="pane2" class="tab-pane table-content fade" role="tabpanel" aria-labelledby="tab2">
                    @foreach($new[2] as $item)
                        <li>
                            <a href="/news/{{$item -> id}}" class="table-item ">
                                <div>
                                    <i class="fa fa-caret-right"></i>
                                    <p>{{$item -> title}}</p>
                                </div>
                                <p class="item-date">{{$item -> creat_at}}</p>
                            </a>
                        </li>
                    @endforeach
                </ul>
                <ul id="pane3" class="tab-pane table-content fade" role="tabpanel" aria-labelledby="tab3">
                    @foreach($new[1] as $item)
                        <li>
                            <a href="/news/{{$item -> id}}" class="table-item ">
                                <div>
                                    <i class="fa fa-caret-right"></i>
                                    <p>{{$item -> title}}</p>
                                </div>
                                <p class="item-date">{{$item -> creat_at}}</p>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

        </div>


    </div>
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="padding: 1rem 11rem 5rem;">


                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="container service">
        <div class="bbw-table" style="width: 40%">
            <div class="table-title">
                航运保险 <a href="/news?type=3" style="float: right;color: #ffffff">更多>></a>
            </div>
            <ul class="table-content">
                @foreach($new[3] as $item)
                    <li>
                        <a href="/news/{{$item -> id}}" class="table-item ">
                            <div>
                                <i class="fa fa-caret-right"></i>
                                <p>{{$item -> title}}</p>
                            </div>
                            <p class="item-date">{{$item -> creat_at}}</p>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="bbw-table">
            <div class="table-title">
                航运金融 <a href="/news?type=4" style="float: right;color: #ffffff">更多>></a>
            </div>
            <ul class="table-content">
                @foreach($new[4] as $item)
                    <li>
                        <a href="/news/{{$item -> id}}" class="table-item ">
                            <div>
                                <i class="fa fa-caret-right"></i>
                                <p>{{$item -> title}}</p>
                            </div>
                            <p class="item-date">{{$item -> creat_at}}</p>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="video-box">
            <div class="table-title border-radius">
                公司视频
            </div>
            <video
                src=""
                controls="true"
            >

            </video>
        </div>
    </div>
    <div class="container news">
        <div class="border">
            <div class="part-title-box">
                <div class="part-title">港口业务</div>
            </div>
            <div class="echat-box">
                <div class="">
                    <p class="echat-title">全国港口吞吐量</p>
                    <div id="left-echart" class="echat" data="{{$businesses[0]}}">

                    </div>
                </div>
                <div class="">
                    <p class="echat-title">主要港口吞吐量</p>
                    <div id="right-echart" class="echat" data="{{$businesses[1]}}">

                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="container knowledge">
        {{--<div class="border">--}}
            <div class="part-title-box">
                <div class="part-title">知识中心</div>
            </div>
            <div class="content">
                <div class="bbw-table">
                    <div class="table-title">
                        基础知识 <a href="" style="float: right;color: #ffffff">更多>></a>
                    </div>
                    <ul class="table-content">
                            @foreach($knowledges[0] as $item)
                                <li>
                                    <a href="/knowledges/{{$item -> id}}" class="table-item ">
                                        <div>
                                            <i class="fa fa-caret-right"></i>
                                            <p>{{$item -> title}}</p>
                                        </div>
                                        <p class="item-date">{{$item -> creat_at}}</p>
                                    </a>
                                </li>
                            @endforeach
                    </ul>
                </div>
                <div class="bbw-table" style="width: 38%">
                    <div class="table-title">
                        港口知识 <a href="" style="float: right;color: #ffffff">更多>></a>
                    </div>
                    <ul class="table-content">
                        @foreach($knowledges[1] as $item)
                            <li>
                                <a href="/knowledges/{{$item -> id}}" class="table-item ">
                                    <div>
                                        <i class="fa fa-caret-right"></i>
                                        <p>{{$item -> title}}</p>
                                    </div>
                                    <p class="item-date">{{$item -> creat_at}}</p>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="bbw-table">
                    <div class="table-title">
                        保险知识 <a href="" style="float: right;color: #ffffff">更多>></a>
                    </div>
                    <ul class="table-content">
                        @foreach($knowledges[2] as $item)
                            <li>
                                <a href="/knowledges/{{$item -> id}}" class="table-item ">
                                    <div>
                                        <i class="fa fa-caret-right"></i>
                                        <p>{{$item -> title}}</p>
                                    </div>
                                    <p class="item-date">{{$item -> creat_at}}</p>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            {{--</div>--}}


        </div>
    </div>
    <div class="container ad">
        <img class="img-fluid w-100" src="http://theory.people.com.cn/NMediaFile/2017/1103/MAIN201711031544461928279828102.jpg" alt="">
    </div>
    {{--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>--}}
    <script src="{{asset('js/lib/echarts.simple.min.js')}}"></script>
    <script src="{{asset('js/home.js')}}"></script>
@endsection
